<template>
  <div>
    <div class="ReadRecord">
      <div class="head">
        <router-link tag="div" to="/PersonalCenter" class="leftbox">
          <div class="bon">
            <svg
              t="1666602398689"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1787"
              width="200"
              height="200"
            >
              <path
                d="M224.45 538.68l575.11-346.21-0.05-68.75-575.03 345.61-0.03 69.35z"
                p-id="1788"
                fill="#ffffff"
              ></path>
              <path
                d="M224.45 538.68l575.08 356.96v-69.52L224.48 469.33l-0.03 69.35z"
                p-id="1789"
                fill="#ffffff"
              ></path>
            </svg>
          </div>

          <span>阅读历史</span>
        </router-link>

        <div class="rightbox">
          <router-link tag="div" to="/PersonalCenter" class="bon">
            <svg
              t="1666602515771"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3006"
              width="200"
              height="200"
            >
              <path
                d="M656.07 492.812a266.713 266.713 0 1 0-284.302 0C176.37 554.853 41.734 748.972 41.734 991.38a31.98 31.98 0 1 0 63.96 0c0-261.276 174.61-458.593 406.466-458.593S918.306 730.743 918.306 991.38a31.98 31.98 0 0 0 63.96 0c0-240.81-133.037-434.288-326.196-498.568zM311.965 266.713a202.753 202.753 0 1 1 202.753 202.754 203.073 203.073 0 0 1-202.753-202.754z"
                p-id="3007"
                fill="#ffffff"
              ></path>
            </svg>
          </router-link>

          <router-link tag="div" to="/RecommendView" class="bon">
            <svg
              t="1666602620237"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4102"
              width="200"
              height="200"
            >
              <path
                d="M954.058556 493.157863c-43.23264-44.004213-422.432055-429.957449-423.904593-431.429986-4.974291-4.975315-12.541641-7.496741-22.49227-7.496741-8.815783 0-15.785521 2.49789-20.711717 7.424086L66.122465 497.179456l0 8.266267c0 18.583241 6.119371 36.461423 17.232476 50.341548 10.562567 13.193487 24.000624 21.069875 35.945677 21.069875l65.450664 0 0 314.966485c0 55.979966 38.562271 75.842339 71.585385 75.842339 2.1295 0 14.32117-0.169869 90.969874-0.169869s70.608128-75.43711 70.608128-75.43711L417.91467 646.39592c0-9.287527 7.496741-16.362666 11.249205-16.362666l48.461735 0 0-40.904619-48.462758 0c-27.782763 0-52.154847 26.759457-52.154847 57.267285l0 245.477854c0 0-1.861394 34.718733-29.751604 34.718733-11.766998 0-89.919962 0.169869-90.920756 0.169869-30.67872 0-30.67872-26.297946-30.67872-34.938744L225.656925 535.952528 121.464911 535.952528c-3.078105-1.87879-11.418051-9.230222-13.795191-22.902616L508.582669 98.130971c52.142567 53.054333 362.372168 368.81081 410.150334 417.437298-0.699941 9.211802-2.52859 13.670348-3.717671 15.657608-0.86367 1.438769-1.606591 2.684132-6.225795 2.684132L804.540218 533.910009l-1.075495 355.077018c-2.52245 8.207939-13.405311 37.604456-39.892569 37.604456 0 0-40.298821 0-75.330686 0s-39.161928-21.097504-39.149649-34.718733c0.079818-84.74408 0.188288-237.419318-0.065492-246.077511-0.245593-8.330736-3.206018-21.429055-10.780531-33.213449-9.723455-15.123442-24.049742-23.454178-40.342824-23.454178l-55.19509 0 0 40.904619 55.19509 0c5.418406 0 10.094916 12.181437 10.235109 16.96437 0.222057 7.557116 0.138146 149.410891 0.048095 244.87615-0.020466 21.3871 0.603751 75.622328 80.055291 75.622328 51.746548 0 75.330686 0 75.330686 0 26.396183 0 48.812729-12.697183 64.826448-36.719296 10.906397-16.35448 14.9679-32.391734 15.395642-34.167171l1.528819-321.79603 63.466474 0c17.935488 0 32.611745-8.020674 41.328267-22.584368 6.597255-11.024078 9.80532-25.65838 9.80532-44.737924l0-8.366551L954.058556 493.157863z"
                p-id="4103"
                fill="#ffffff"
              ></path>
            </svg>
          </router-link>
        </div>
      </div>
      <div class="titlehead">阅读记录</div>

      <div class="textbox">
        <div class="title">
            <p>总共 <span>3</span> 本书</p>
            <p>编辑</p>
          </div>
      </div>

      <div class="template">
          <div class="book">
            <div class="img">
              <img src="../assets/img/book1.jpg" alt="" />
            </div>

            <div class="text">
              <p>神秘伪先生</p>
              <span>第373章:你有没有被人始乱终弃过？</span>
              <div class="txtfoot">
                <p><span>2022-9-29 07:04</span>更新</p>
                <div class="con">1/373章</div>
              </div>
            </div>
          </div>

          <div class="book">
            <div class="img">
              <img src="../assets/img/book1.jpg" alt="" />
            </div>

            <div class="text">
              <p>神秘伪先生</p>
              <span>第373章:你有没有被人始乱终弃过？</span>
              <div class="txtfoot">
                <p><span>2022-9-29 07:04</span>更新</p>
                <div class="con">1/373章</div>
              </div>
            </div>
          </div>

          <div class="book">
            <div class="img">
              <img src="../assets/img/book1.jpg" alt="" />
            </div>

            <div class="text">
              <p>神秘伪先生</p>
              <span>第373章:你有没有被人始乱终弃过？</span>
              <div class="txtfoot">
                <p><span>2022-9-29 07:04</span>更新</p>
                <div class="con">1/373章</div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.ReadRecord {
  .head {
    display: flex;
    background-color: #222222;
    padding: 10px 14px;
    justify-content: space-between;
    border-bottom: 1px solid #444444;
    .leftbox {
      display: flex;

      .bon {
        .icon {
          padding-top: 1px;
          width: 20px;
          height: 20px;
        }
      }

      span {
        color: #fff;
        font-size: 16px;
        padding-left: 8px;
      }
    }
    .rightbox {
      display: flex;
      .bon {
        margin-left: 16px;
        .icon {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  .titlehead {
    text-align: center;
    background-color: #fff;
    padding: 16px 0px;
    color: #000;
    font-weight: bold;
  }

  .textbox{
    .title {
        background-color: #fff;
        display: flex;
        padding: 0px 20px;
        justify-content: space-between;

        p {
          font-size: 14px;
          color: #000;
          span {
            color: red;
          }
        }
      }
  }

  .template {
    background-color: #fff;
      .book {
        align-items: center;
        display: flex;
        padding: 10px 20px;
        .img {
            margin-right: 10px;
          img {
            width: auto;
            height: 80px;
          }
        }

        .text{
            display: flex;
            flex-direction: column;
            p{
                color: #333;
                font-size: 16px;
                font-weight: bold;
            }
            span{
                color: #666666;
                font-size: 14px;
            }

            .txtfoot{
                margin-top: 4px;
                display: flex;
                 justify-content: space-between;
                p{
                    color: #666666;
                    font-size: 14px;
                }

                .con{
                    color: #1abc9c;
                    font-size: 14px;
                }


            }
        }




      }
    }

  
}
</style>